<template>
  <view class="myPage">
    <view class="shade"></view>
    <view class="myTop">
      <uni-search-bar @confirm="searchFun" bgColor="#ECEFF1" radius="24" placeholder="搜索文创商品"></uni-search-bar>
      <view class="tabs">
        <v-tabs :tabs="tabs" @changeType="changeType" :selected='searchType'></v-tabs>
      </view>
    </view>
    <scroll-view v-if="dataList.length > 0" scroll-x="false" scroll-y="true" @scrolltolower="getList" style="z-index: 2;">
      <view class="myList">
        <view class="list">
          <view v-for="(item, index) in dataList" :key="index" class="list-item" @click="toPage('/page_mall/detail/detail',{ id: item.id })">
            <image :src="img_baseUrl + item.imgAbbrev" class="img"></image>
            <text class="title">{{ item.name }}</text>
            <text class="price">¥{{ item.price.toFixed(2) }}</text>
          </view>
        </view>
        <view class="loadMore">{{ loadMore ? "数据加载中" : "没有更多内容了"}}</view>
      </view>
    </scroll-view>
    <view class="noData" v-else style="height: 100%;">
      <image :src="`${img_baseUrl}/statics/std/static/noData.png`"></image>
      <text>暂无数据</text>
    </view>
    <view class="shoppingCart" @click="goToCart">
      <image class="cart" :src="`${img_baseUrl}/statics/std/static/shopping_cart.png`"></image>
      <text class="number">{{ mobileCartNum }}</text>
    </view>
  </view>
</template>

<script>
import UniSearchBar from "@/components/searchBar.vue";
import vTabs from '@/components/tabs.vue';
import {requestGet} from '@/utils/request.js';
let img_api = process.env.VUE_APP_BASEURL_IMG_API;
export default {
  components: {UniSearchBar,vTabs},
  data() {
    return {
      searchVal: '',
      searchType: '',
      tabs: [{text: '全部文创', label: ''}],
      dataList: [],
      pages:{
        pageNum: 1,
        pageSize: 10
      },
      loadMore: true,
      mobileCartNum: 0,
      img_baseUrl: img_api,
      userInfo: null
    };
  },
  computed: {},
  onLoad() {
    this.getCategoryList();
    this.getList();
  },
  onShow() {
    this.userInfo = Object.prototype.toString.call(uni.getStorageSync('X-UserInfo')) === "[object Object]" ? uni.getStorageSync('X-UserInfo') : null;
    this.getMobileCart();
  },
  methods: {
    toPage(url, params = {}) {
      let paramsString = "";
      for (const paramsKey in params) {
        if (!paramsString) {
          paramsString += "?";
        } else {
          paramsString += "&";
        }
        paramsString += `${paramsKey}=${params[paramsKey]}`;
      }
      uni.navigateTo({
        url: `${url}${paramsString}`,
      });
    },
   searchFun(val){
     this.searchVal = val;
     console.log('searchVal===', this.searchVal, val)
     this.initVal();
     this.getList();
   },
   initVal(){
     this.pages = {
        pageNum: 1,
        pageSize: 10
      };
      this.dataList = [];
      this.loadMore = true;
   },
   changeType(val){
     console.log('searchType====', val.type);
     this.searchType = val.type;
     this.initVal();
     this.getList();
   },
   getMobileCart(){
     if(this.userInfo){
       requestGet('/mobile/cart/countByUser', {}, '/shop', false).then(res => {
         this.mobileCartNum = res?.data || 0;
       })
     }
   },
   goToCart(){
     if(!this.userInfo){
       uni.showModal({
       	title: '提示',
       	content: '您还没有登录，请前往登录',
         showCancel: true,
       	success: function (res) {
       		if (res.confirm) {
       			uni.navigateTo({
       			  url: '/pages/login/index'
       			});
       		}
           else if (res.cancel) {
       			console.log('用户点击取消');
       		}
       	}
       });
       return
     }
     // 前往购物车列表
     this.toPage('/page_mall/cart/index')
   },
   getList(){
     if(!this.loadMore){
       return
     }
     console.log('getList===========')
     let params = {...this.pages, name: this.searchVal};
     if(this.searchType && this.searchType != '') params = {...params, categoryId: this.searchType}
     requestGet("/mobile/goods/list",params, '/shop').then(res => {
       if(res.code === 200){
         if(res.rows.length > 0){
           this.dataList.push(...res.rows);
           if(this.dataList.length < res.total){
             this.loadMore = true;
             this.pages.pageNum = this.pages.pageNum + 1;
           }else{
             this.loadMore = false;
           }
         }
       }
     })
   },
   getCategoryList(){
     requestGet("/mobile/goods/category/search",{level: 1}, '/shop').then(res => {
       console.log('/mobile/goods/category/search=====', res)
       if(res.code === 200 && res.data.length > 0){
         const list = res.data.map(i => {return {text: i.name, label: i.id}})
         this.tabs = [...this.tabs,...list];
       }
     })
   },
  },
};
</script>

<style scoped lang="scss">
  .myPage{
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    .shade{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 440rpx;
      background: linear-gradient(180deg, #FFFFFF 0%, rgba(255,255,255,0.9076) 76%, rgba(255,255,255,0) 100%);
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      z-index: 1;
    }
    .myTop{
      width: 100%;
      z-index: 2;
      .tabs{
        margin-left: 32rpx;
        margin-top: 14rpx;
      }
    }
    .myList{
      height: calc(100vh - 192rpx);
      margin-left: 32rpx;
      margin-top: 16rpx;
      z-index: 2;
      .list{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: flex-start;
      }
      .list-item{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        width: 336rpx;
        height: 516rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 16rpx 48rpx 0rpx rgba(149,157,165,0.2);
        border-radius: 24rpx;
        margin-bottom: 16rpx;
        .img{
          width: 336rpx;
          height: 328rpx;
          border-radius: 24rpx 24rpx 4rpx 4rpx;
        }
        .title{
          width: 288rpx;
          height: 80rpx;
          font-size: 28rpx;
          font-weight: 500;
          color: rgba(0,0,0,0.8);
          line-height: 40rpx;
          margin: 24rpx;
          display: -webkit-box;
          -webkit-line-clamp: 2; /* 控制最多显示两行 */
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .price{
          height: 34rpx;
          font-size: 32rpx;
          font-family: D-DIN-Bold, D-DIN;
          font-weight: 700;
          color: #FF7614;
          line-height: 34rpx;
          margin: 0 0 24rpx 24rpx;
          align-self: flex-start;
        }
      }
      .list-item:nth-child(2n-1){
        margin-right: 14rpx;
      }
      .loadMore{
        display: block;
        width: 100%;
        font-size: 24rpx;
        color: rgba(0,0,0,0.5);
        text-align: center;
        line-height: 64rpx;
      }
    }
    .shoppingCart{
      position: fixed;
      bottom: 44rpx;
      right: 32rpx;
      width: 96rpx;
      height: 96rpx;
      border-radius: 48rpx;
      background: #FFFFFF;
      border: 2rpx solid rgba(0,0,0,0.1);
      z-index: 2;
      .cart{
        height: 48rpx;
        width: 48rpx;
        margin: 24rpx;
      }
      .number{
        width: 32rpx;
        height: 32rpx;
        background: #FFFFFF;
        border-radius: 16rpx;
        position: absolute;
        top: 18rpx;
        right: 16rpx;
        font-size: 24rpx;
        font-family: D-DIN-Bold, D-DIN;
        font-weight: 700;
        color: #3FAA73;
        line-height: 32rpx;
        text-align: center;
      }
    }
  }
</style>
